<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page language="java" import="java.util.*,java.text.*" pageEncoding="utf-8" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=7" />
	<title>User Registration</title>
	<meta content="" name="keywords" />
	<meta content="" name="description" />
	<link href="css/common.css" rel="stylesheet" type="text/css" />

</head>

<script type="text/javascript" src="js/common.js"></script>

<script language="JavaScript">
	function validateForm() {
		if (document.form1.name.value == "") {
			alert("Username cannot be empty!");
			document.form1.name.focus();
			return false;
		}
		if (document.form1.pwd.value == "") {
			alert("Password cannot be empty!");
			document.form1.pwd.focus();
			return false;
		}
		if (document.form1.qpwd.value == "") {
			alert("Confirm Password cannot be empty!");
			document.form1.qpwd.focus();
			return false;
		}
		if (document.form1.qpwd.value != document.form1.pwd.value) {
			alert("Passwords do not match!");
			document.form1.qpwd.focus();
			return false;
		}
		if (document.form1.realname.value == "") {
			alert("Full Name cannot be empty!");
			document.form1.realname.focus();
			return false;
		}
		if (document.form1.age.value == "") {
			alert("Age cannot be empty!");
			document.form1.age.focus();
			return false;
		}
		if (document.form1.card.value == "") {
			alert("ID Card Number cannot be empty!");
			document.form1.card.focus();
			return false;
		}
		if (document.form1.address.value == "") {
			alert("Home Address cannot be empty!");
			document.form1.address.focus();
			return false;
		}
		if (document.form1.phone.value == "") {
			alert("Phone Number cannot be empty!");
			document.form1.phone.focus();
			return false;
		}
		if (document.form1.email.value == "") {
			alert("Email Address cannot be empty!");
			document.form1.email.focus();
			return false;
		}
		if (document.form1.code.value == "") {
			alert("Postal Code cannot be empty!");
			document.form1.code.focus();
			return false;
		}
	}
</script>

<body style='background:transparent'>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td align="left" valign="top">
			<jsp:include flush="false" page="top.jsp"/>
		</td>
	</tr>
	<tr>
		<td height="20"></td>
	</tr>

	<tr>
		<td align="center" valign="center" height="450">
			<form action="<c:url value="/users/insert"/>" name="form1" method="post" onSubmit="return validateForm()">
				<div align="center"><br>
					<table border="1" cellspacing="0" bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0" width="700">
						<tr>
							<td colspan="3" align="center" bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0" height="25">
								<font color="#666666">Please fill in your information (fields marked with <font color="red">*</font> are required)</font>
							</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Username:</font></td>
							<td align="left" height="25"><input class="input7" type="text" name="name"/></td>
							<td align="left" height="25"><font color="red">*</font> This is your login username</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Password:</font></td>
							<td align="left" height="25"><input class="input7" type="password" name="pwd"/></td>
							<td align="left" height="25"><font color="red">*</font> Must be between 5-16 characters, English letters or numbers only</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Confirm Password:</font></td>
							<td align="left" height="25"><input class="input7" type="password" name="qpwd"/></td>
							<td align="left" height="25"><font color="red">*</font> Please re-enter your password</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Full Name:</font></td>
							<td align="left" height="25"><input class="input7" type="text" name="realname"/></td>
							<td align="left" height="25"><font color="red">*</font> Enter your real name</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Gender:</font></td>
							<td align="left" height="25">
								<input type="radio" name="sex" checked value="Male"> Male
								<input type="radio" name="sex" value="Female"> Female
							</td>
							<td align="left" height="25"><font color="red">*</font> Provide accurate information</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Age:</font></td>
							<td align="left" height="25"><input class="input7" type="text" name="age"/></td>
							<td align="left" height="25"><font color="red">*</font> Enter your real age</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">ID Card Number:</font></td>
							<td align="left" height="25"><input class="input7" type="text" name="card"/></td>
							<td align="left" height="25"><font color="red">*</font> Provide accurate information</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Home Address:</font></td>
							<td align="left" height="25"><input class="input7" type="text" name="address"/></td>
							<td align="left" height="25"><font color="red">*</font> Provide accurate information</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Phone Number:</font></td>
							<td align="left" height="25"><input class="input7" type="text" name="phone"/></td>
							<td align="left" height="25"><font color="red">*</font> Provide accurate information (e.g., 13911111111)</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Email Address:</font></td>
							<td align="left" height="25"><input class="input7" type="text" name="email"/></td>
							<td align="left" height="25"><font color="red">*</font> Enter a valid email address for service updates</td>
						</tr>
						<tr>
							<td align="right" height="25"><font color="#996633">Postal Code:</font></td>
							<td align="left" height="25"><input class="input7" type="text" name="code"/></td>
							<td align="left" height="25"><font color="red">*</font> Provide accurate information (format: 111111)</td>
						</tr>
						<tr>
							<td colspan="3" align="center" height="25">
								<input type="submit" value="Register" />
							</td>
						</tr>
					</table>
				</div>
			</form>
		</td>
	</tr>
	<tr>
		<td height="10">&nbsp;</td>
	</tr>
	<tr>
		<td height="50" align="center" valign="middle">
			<jsp:include flush="false" page="copyright.jsp"/>
		</td>
	</tr>
</table>

</body>
</html>
